<template>
  <div>
    <el-form-item label="商品规格" required>
      <el-row :gutter="20">
        <el-col :span="8">
          <h-spec-choose v-model="currentValue" @change="specChange"></h-spec-choose>
        </el-col>
        <el-col :span="11">
          <span>输入需要添加的规格信息并在下面选择具体的规则信息</span>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item v-for="item in value.datas" :key="item.id" :label="item.name">
      <el-row :gutter="30">
        <el-col :span="19">
          <el-radio-group v-model="item.value" size="mini" @change="groupChage">
            <el-radio-button v-model="item.value" v-for="value in item.values" :key="value"
                             :label="value"></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-form-item>
  </div>
</template>
<script>
  import AdminService from 'src/service/admin'
  import emitter from 'src/components/emitter'
  import HSpecChoose from 'src/components/common/choose/HSpecChoose'

  export default {
    name: 'HSpecInput',
    components: {HSpecChoose},
    mixins: [emitter],
    data() {
      return {
        currentValue: null,
        search: {
          name: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          isShow: 1,
          status: 1,
          orderBy: 'id'
        }
      }
    },
    props: {
      value: {
        type: Object
      },
      validateEvent: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      value: function (newValue, oldValue) {
        const me = this
        if (newValue != null) {
          if (newValue.ids != null) {
            if (newValue.datas != null && newValue.datas.length > 0) {
              AdminService.specByIds(newValue.ids).then(data => {
                if (data != null) {
                  const datas = data.datas

                  const currVal = newValue.datas.map(data => {
                    datas.map(d => {
                      if (d.id == data.id) {
                        d.value = data.value;
                      }
                    })
                    return data.id
                  })
                  me.currentValue = currVal.join(',')
                  me.value.datas = datas;
                }
              })

            }
          }
        }
      }
    },
    methods: {
      specChange: function (ids) {
        this.value.ids = ids;
        const me = this;
        if (ids == null || ids.trim() == '') {
          me.value.datas = [];
        } else {
          AdminService.specByIds(ids).then(data => {
            if (data != null) {
              me.value.datas = data.datas
            }
          })
        }
      },
      groupChage: function (item) {
        this.$emit('change', this.value)
      }
    },
    mounted: function () {
      if (this.value != null) {
        if (this.value.ids != null) {
          if (this.value.datas != null && this.value.datas.length > 0) {
            const currVal = this.value.datas.map(data => {
              return data.id
            })
            this.currentValue = currVal.join(',')
          }
        }
      }
    }
  }
</script>
